<!-- 质检单记录 -->
<template>
    <div id="change">
        <div class="change-top">
            单据编号：
            <el-input size="small" style="width: 240px;margin-left: 10px;margin-right: 20px;" placeholder="请输入单据号"
                v-model="code" clearable>
            </el-input>
            日期：
            <el-date-picker size="small" :unlink-panels="true" v-model="value1" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
            <el-button size="small" style="margin-left: 10px;" type="primary" @click="getPage(1, 5)">查询</el-button>
            <el-button size="small" type="primary" @click="goto('addQuality')">新增</el-button>
            <el-button size="small" type="primary">导入</el-button>
            <el-button size="small" type="primary">导出</el-button>
            <el-button size="small" type="success">审核</el-button>
            <!-- <el-button size="small" type="danger">删除</el-button> -->
        </div>
        <div class="change-content">
            <el-table show-summary :summary-method="getSummaries" height="500px" :data="pageInfo.list" border
                style="width: 100%;font-size: 13px;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="createDate" label="单据日期" width="150">
                </el-table-column>
                <el-table-column prop="qualityCode" label="单据编号" width="150">
                </el-table-column>
                <el-table-column prop="purchaseCode" label="关联采购单号" width="150">
                </el-table-column>
                <el-table-column prop="salesReturnCode" label="关联销货退货单号" width="150">
                </el-table-column>
                <el-table-column prop="employeeName" label="质检员" width="120">
                </el-table-column>
                <el-table-column prop="providerName" label="供应商名称" width="150">
                </el-table-column>
                <el-table-column label="商品明细" width="700">
                    <template slot-scope="scope">
                        <table id="contact-table" style="width: 100%; text-align:center;">
                            <tr>
                                <th>商品编号</th>
                                <th>商品名称</th>
                                <th>质检数量</th>
                                <th>通过数量</th>
                                <th>备注</th>
                            </tr>
                            <tr v-for="(detail, index) in scope.row.details" :key="index">
                                <td>{{ detail.goodcode }}</td>
                                <td>{{ detail.goodname }}</td>
                                <td>{{ detail.totalNum }}</td>
                                <td>{{ detail.passedNum }}</td>
                                <td style="width: 200px;">{{ detail.detailRemark }}</td>
                            </tr>
                            <tr style="background-color: #fff1d4;color: red;">
                                <td>合计</td>
                                <td></td>
                                <td v-if="sum.id == scope.row.qualityId" v-for="(sum, index) in totalCount"
                                    :key="index">
                                    {{ sum.totalSum }}</td>
                                <td v-if="item.id == scope.row.qualityId" v-for="(item, index) in passedCounts"
                                    :key="index">{{ item.passedSum }}</td>
                                <td></td>
                            </tr>
                        </table>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="200">
                </el-table-column>
                <el-table-column fixed="right" label="质检结果" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.result == 1"><el-tag type="success">通过</el-tag></span>
                        <span v-else><el-tag type="danger">未通过</el-tag></span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle
                            @click="qualityUpdate(scope.row.qualityCode)"></el-button>
                        <el-button type="danger" @click="deleteQuality(scope.row.qualityCode)" icon="el-icon-delete"
                            circle></el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <el-pagination style="width: 400px;position: relative;left: 700px;bottom: 30px;"
            @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
            layout="total, prev, pager, next, jumper" :total="pageInfo.total">
        </el-pagination>

    </div>
</template>

<script>
import PublicButton from '../public_com/PublicButton.vue';
import AddChange from './AddChange.vue';
export default {
    name: 'ChangeList',
    components: {
        AddChange,
        PublicButton,
    },
    data() {
        return {
            //新增对话框
            dialogFormVisible: false,
            value: '',
            input: '',
            value1: '',
            pageInfo: null,
            passedCounts: [],
            totalCount: [],
            code: ''
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.getPage(val, 5)
        },
        goto(to) {
            this.$router.push(to)
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (column.property === "num") {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                }
            });

            return sums;
        },
        successMessage(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        errorMessage(msg) {
            this.$message({
                message: msg
                ,
                type: 'error'
            })
        },
        getPage(pageNum, pageSize) {

            var params = {
                pageNum,
                pageSize
            }
            if (this.value1 != null) {
                const startTime = this.value1[0]
                const endTime = this.value1[1]
                if (startTime !== '' && endTime != '') {
                    params.startTime = startTime
                    params.endTime = endTime
                }
            }
            if (this.code !== '') {
                params.qualityCode = this.code
            }

            this.axios.get('/store/quality/getPage', {
                params
            }).then(rs => {
                this.pageInfo = rs.data.pageInfo
                this.getAllCount()
            })
        },
        getAllCount() {
            this.passedCounts = []
            this.totalCount = []
            var list = this.pageInfo.list
            list.forEach(item => {
                var detailList = item.details
                var passedSum = 0
                var totalSum = 0
                detailList.forEach(detail => {
                    passedSum += parseInt(detail.passedNum)
                    totalSum += parseInt(detail.totalNum)
                })
                this.passedCounts.push({ id: item.qualityId, passedSum })
                this.totalCount.push({ id: item.qualityId, totalSum })

            })
        },
        deleteQuality(qualityCode) {
            this.$confirm('删除该条质检单?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.get('/store/quality/deleteQuality',
                    {
                        params: {
                            qualityCode
                        }
                    }
                ).then(rs => {
                    if (rs.data.code == 200) {
                        this.successMessage("删除成功")
                        this.getPage(1, 5)
                    } else {
                        this.errorMessage("删除出错了")
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        qualityUpdate(qualityCode) {
            this.$router.push({
                path: 'updateQuality',
                query: {
                    qualityCode
                }
            })
        }
    },
    created() {
        this.getPage(1, 5)
    }

}
</script>

<style scoped>
#change {
    width: 100%;
    height: 100%;
}

.change-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.change-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td,
.el-table /deep/ .el-table__fixed-footer-wrapper tbody td {
    background-color: #fff1d4;
}

.el-table /deep/ tbody tr:hover>td {
    background-color: #fff1d4;
}

#contact-table {
    border-collapse: collapse;
    text-align: center;
}

#contact-table th,
#contact-table td {
    border: 1px solid gray;
    padding: 0px;
}
</style>